<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'

const chartsRef = ref<any>()

const manPercent = ref<number>(60)
const womanPercent = ref<number>(40)

const initCharts = () => {
  let myCharts = echarts.init(chartsRef.value)

  myCharts.setOption({
    xAxis: {
      show: false,
      min: 0,
      max: 100,
    },
    yAxis: {
      show: false,
      type: 'category',
    },
    grid: {
      left: 50,
      right: 50,
      top: -20,
      bottom: 0,
    },
    series: [
      {
        type: 'bar',
        barWidth: 20,
        // stack: 'total',
        data: [manPercent.value],
        itemStyle: {
          color: '#007AFE',
          borderRadius: 20,
        },
        z: 100,
      },
      {
        type: 'bar',
        barWidth: 20,
        // stack: 'total',
        data: [manPercent.value + womanPercent.value],
        // https://echarts.apache.org/zh/option.html#series-bar.barGap
        barGap: '-100%',
        itemStyle: {
          color: '#FF4B7A',
          borderRadius: 20,
        },
      },
    ],
  })
}
onMounted(() => {
  initCharts()
})
</script>

<template>
  <div class="data">
    <div class="top">
      <p class="title">男女比例</p>
    </div>
    <div class="tag_group">
      <div class="tag">
        <img
          class="tag_bg"
          src="@/assets/images/data_screen/man-bg.png"
          alt=""
        />
        <img
          class="tag_avatar"
          src="@/assets/images/data_screen/man.png"
          alt=""
        />
        <p>男士</p>
      </div>
      <div class="tag">
        <img
          class="tag_bg"
          src="@/assets/images/data_screen/woman-bg.png"
          alt=""
        />
        <img
          class="tag_avatar"
          src="@/assets/images/data_screen/woman.png"
          alt=""
        />
        <p>女士</p>
      </div>
    </div>
    <div class="percent">
      <p>男{{ manPercent }}%</p>
      <p>女{{ womanPercent }}%</p>
    </div>
    <div class="charts" ref="chartsRef"></div>
  </div>
</template>

<style scoped lang="scss">
$title-height: 32px;
$tag-height: 116px;

.data {
  flex: 1;

  .top {
    margin-bottom: 40px;
    font-size: 20px;
    line-height: $title-height;
    color: #fff;

    .title {
      &::after {
        top: $title-height;
        left: 0;
        display: block;
        width: 68px;
        height: 7px;
        content: '';
        background: url('@/assets/images/data_screen/figure.png') no-repeat;
        background-size: cover;
      }
    }
  }

  .tag_group {
    display: flex;
    justify-content: center;
    width: 100%;
    height: $tag-height;

    .tag {
      position: relative;
      width: 111px;
      height: $tag-height;
      margin: 0 20px;

      .tag_bg {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .tag_avatar {
        position: absolute;
        top: 32px;
        left: 25px;
        width: 61px;
        height: 64px;
      }

      p {
        position: absolute;
        width: 100%;
        color: #fff;
        text-align: center;
      }
    }
  }

  .percent {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px;
    color: #fff;
  }

  .charts {
    width: 100%;
    height: 80px;
  }
}
</style>
